<template>
  <div class="threeNav">
    <ul class="titUL">
      <li @click="cutActive(item.id)" v-for="item in titelData" :key="item.id" :class="item.id===active?'active':''">{{item.txt}}</li>
    </ul>
    <ul class="cenUl">
      <li class="fashion_box" v-if="active===1">
        <goods-card v-for="(item,index) in fashionData" :key="index" :item="item" ></goods-card>
      </li>
      <li class="fashion_box" v-if="active===2">
        <goods-card v-for="(item,index) in newStyleData" :key="index" :item="item"></goods-card>
      </li>
      <li class="fashion_box" v-if="active===3">
        <goods-card v-for="(item,index) in choicenessData" :key="index" :item="item"></goods-card>
      </li>
    </ul>
  </div>
</template>

<script>
// 流行数据
import {
  queryFashionData,
  queryNewStyleData,
  queryChoicenessData,
} from "@/netWork/api/index.js";

// 精选数据
// 新款数据
//商品卡片组件
import goodsCard from "./goodsCard.vue";
export default {
  components: { goodsCard },
  data() {
    return {
      titelData: [
        { txt: "流行", id: 1 },
        { txt: "新款", id: 2 },
        { txt: "精选", id: 3 },
      ],
      active: 1,
      fashionData: [], //流行
      newStyleData: [], //新款
      choicenessData: [], //精选
    };
  },
  mounted() {
    this.fashionlist(1);
    this.newStylelist(1);
    this.choicenesslist(1);
  },
  methods: {
    //   流行
    fashionlist(id) {
      queryFashionData(id).then((res) => {
        //   console.log(res.data.data.list);
        this.fashionData = res.data.data.list;
      });
    },
    //     新款
    newStylelist(id) {
      queryNewStyleData(id).then((res) => {
      //   console.log(res.data.data.list);
        this.newStyleData = res.data.data.list;
      });
    },
    //     精选
    choicenesslist(id) {
      queryChoicenessData(id).then((res) => {
        console.log(res);
        this.choicenessData = res.data.data.list;
      });
    },
    cutActive(id) {
      this.active = id;
    },
  },
};
</script>

<style lang="scss" scoped>
.threeNav {
  width: 100%;
  .titUL {
    width: 100%;
    display: flex;
    justify-content: space-around;
    li {
      display: inline;
      text-align: center;
      font-size: 18px;
      line-height: 40px;
      padding: 0 8px;
    }
    .active {
      border-bottom: solid 3px #ff9cce;
      color: #f49677;
    }
  }
  .cenUl {
    .fashion_box {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>